import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import TextLoop from "react-text-loop";
import Mytab from './Mytab'
import Slide from './Slide'
import './css/home.css'
import { getConfigController, getEducationInfo } from './actionCreators'
import Area from './Area';


class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state={
            pageNo:1
        }
    }
    componentDidMount() {
        this.props.dispatch(getEducationInfo(this.state.pageNo))
        this.props.dispatch(getConfigController())
    }
    render() {
        console.log(this.props.config);
        return (
            <div className='all'>
                <div className='position'>
                    <Area />
                </div>
                <Slide />
                <div className='home_teacher'>
                    <div 
                        onClick={()=>{this.props.history.push('/resume')}}
                    >我要做家教老师</div>
                    <div
                        onClick={()=>{this.props.history.push('/invite')}}
                    >我要请家教老师</div>
                </div>
                <div className='notice'>
                    <TextLoop 
                        pringConfig={{ stiffness: 340, damping: 30 }} 
                        mask={true} 
                        fade={true} 
                        adjustingSpeed={150} 
                        delay={2000} 
                        interval={[2000, 2000, 2000]}
                    >
                        <span>滚动广告：恭喜刘教员和朝阳初二的同学匹配成功</span>
                        <span>滚动广告：恭喜李教员和长安初三的同学匹配成功</span>
                        <span>滚动广告：恭喜白教员和裕华初一的同学匹配成功</span>
                    </TextLoop>
                </div>
                <div className='home_infos'>
                    {
                        this.props.dataInfo.map((info) => (
                            <div className='info' 
                                key={info.id}
                                onClick={()=>this.props.history.push({
                                    pathname:'/infodetail',
                                    educationinfo:info
                                })}
                            >
                                {
                                    info.status == 1
                                    ? <div className='appointment'>已预约</div>
                                    : <div className='appointment'>可预约</div>
                                }
                                <div className='order-number'>订单编号：{info.id}</div>
                                <div className='city'>城市：{info.city}</div>
                                <div className='sex'>性别：{info.sex}</div>
                                <div className='area'>区域：{info.area}</div>
                                <div className='grade'>年级：{info.grade}</div>
                                <div className='subject'>科目：{info.teacherSubject}</div>
                                <div className='remarke'>发单用户昵称：{info.remarke}</div>
                                <div className='good'>好评率：80%</div>
                            </div>
                        ))
                    }
                    <div className='home-more' onClick={()=>{this.props.history.push('/infor')}}>查看更多</div>
                </div>
                <Mytab />
                <div className='bottom'></div>
            </div>
        )

    }



}
const mapStateToProps = (state) => ({
    dataInfo: state.dataInfo,
})

export default connect(mapStateToProps)(Home)